<template>
	<view class="doy-pay-index">


		<view class="top-card padding_20rpx_0" :style="{ '--bg-image': `url(${activitySetObj.presell_pic})` }">




		</view>
		<view class="v-content">
			<sunui-navbar activeFontWeight="900" :items="tabList" :currentIndex="navIndex" padding="20rpx" :size="220"
				activeFontSize="30rpx" fontSize="30rpx" activeLineWidth="50%" activeLineBg="#D83734" textAlign="center"
				activeDirection="center" activeLineHeight="8rpx" activeColor="#D83734" :isCenter="true"
				@change="e=>getChange(e,tabList[e].id)"></sunui-navbar>
			<view class="" style="height: 30rpx;">

			</view>


			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<view class="dailyFlashSaleList flex-columns ">

					<block v-for="(item,index) in presellGoodsList" :key="index">
						<view
							style="margin-bottom: 20rpx;border-radius: 20rpx; background-color: #fff;padding: 15rpx ;">
							<view class="flex-around"
								style="border-radius: 20rpx; background-color: #fff;padding: 8rpx 0;">

								<view class="dailyFlashSaleContainer">
									<image class="dailyFlashSaleImg" style="margin-right: 10rpx; " :src="item.pic_url"
										mode="scaleToFill">
									</image>
									<view class="triangleText flex font-size_22rpx" v-if="navIndex==1">
										<text>即将众筹</text>
									</view>
									<view class="text flex font-size_22rpx" v-if="navIndex==0">
										众筹中
									</view>
									<view class="trafficText flex font-size_22rpx" v-if="navIndex==2">
										众筹结束
									</view>
								</view>



								<view class="flex-column-start">
									<view style="width: 450rpx"
										class="font-overflow margin-bottom_20rpx font-size_32rpx">
										<text style="font-weight: 700;">{{item.goods_name}}</text>
									</view>







									<view class="">

										<view class="flex-start" v-if=" currentIndex==0">
											<!-- <view class="joinGroupBtn flex">
											<text class="font-size_24rpx">5人团</text>
										</view> -->


											<cc-countdown style="margin-left: 10rpx;" color="#FFF"
												background-color="#ef3c2e" splitorColor="red" :showColon="true"
												:showDay="true" :day="item.activeTimeing.days"
												:hour="item.activeTimeing.hours" :minute="item.activeTimeing.minutes"
												:second="item.activeTimeing.seconds" @timeup="timeup"></cc-countdown>
										</view>

										<view class="" v-if="currentIndex==0">
											<view style="color:#EF3C2E; padding-left: 10rpx;margin-top: 20rpx;"
												class="font-weight  flex-start-center">
												众筹金额(每人):￥{{item.money}}
											</view>
											<view
												style="color:#FF13006E;  text-decoration: line-through; padding-left: 10rpx;margin-top: 5rpx;"
												class=" font-size_24rpx  flex-start-center">
												原价:￥{{item.price}}
											</view>
										</view>

									</view>





								</view>

							</view>

							<view class="robOver  flex-betweens margin-top_10rpx" v-if="currentIndex==0">
								<view class="flex-start-center margin-left_20rpx">
									<view class="flex-start-center">
										<view class="flex-between v-p-share">
											<view class="v-m-width not-font-overflow flex1">
												<block v-for="(img, index) in item.imgList" :key="index">
													<image v-if="index<5" class="pt_img" :src="img"></image>
												</block>

											</view>

										</view>


									</view>
									<text class="font-size_24rpx">已有{{item.sold}}人参加众筹</text>
								</view>
								<view class="registrationBtn flex" v-if="navIndex==1">
									未开始
								</view>
								<view class="registrationBtn flex-column" v-if="navIndex==0"
									@click="joinActivities(4,item.id)">
									<view class="" style="color: #fff;">
										￥{{item.money}}
									</view>
									<!-- <view class="initerTexts flex-columns"  v-if="(item.order_status==1)" >
										<view style="color: #fff;" class="font-size_24rpx">
											￥{{  Number(item.order_money)}}
										</view>
										<view style="color: #fff;" class="font-size_24rpx">
											立即支付
										</view>
																			
									</view> -->
									<view class="" style="color: #fff;">
										立即参加
									</view>
								</view>

								<view class="registrationBtnOver flex" v-if="navIndex==2"
									@click="joinActivities(4,item.id)">
									已结束
								</view>

							</view>
						</view>

					</block>
				</view>
			</mescroll-body>
		</view>
		<!-- 	<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="containerList flex-start-center" v-for="(item,index) in copywritingList" :key="index">
				<image class="imgList" :src="item.icon" mode=""></image>
				<view class="">
					<view class="font-weight_bold font-size_32rpx " style="margin: 0 0 30rpx 30rpx;">
						
						{{item.classification==1?'D音转发':item.classification==2?'K手转发': '视频号转发'}}
					</view>
					<view class="flex-start-center">
						<view class="font-size_26rpx" style="margin-left: 30rpx;">
							{{item.createTime}}
						</view>
						
					</view>
				</view>

			</view>
		</mescroll-body> -->



	</view>
</template>

<script>
	import aiProgress from '@/components/ai-progress/ai-progress.vue'
	export default {
		components: {
			aiProgress
		},
		data() {

			return {
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				imgList: [
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
					'/static/avatar.png',
				],
				tabSwitchList: [{
						id: 0,
						tabName: '团购'

					},
					{
						id: 1,
						tabName: '秒杀'

					},
					{
						id: 2,
						tabName: '砍价'

					}
				],
				currentIndex: 0,
				customBar: 0,
				isStatus: 2,
				navIndex: 0,
				TouchtouchRectangle: '/static/banan.png',
				haibaoBanner: this.$imgs.flashSaleposter,

				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				presellGoodsList: [],
				tabList: [{
						name: '进行中 ',
						id: 2
					},
					{
						name: '未开始',
						id: 1
					},
					{
						name: '已结束',
						id: 3
					}
				],
				activitySetObj: {},
				windowHeight: 0


			}
		},
		computed: {
			totelName: function() {
				return function(num) {
					console.log(num);
					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		onLoad() {
			this.createdgetSystemInfo();
			this.randomUserFn()
			this.activitySetFn()
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight - 700;
				}
			});

		},

		onShow() {

		},
		methods: {
			async randomUserFn(sold) {
				if (sold) {
					const result = await this.$http.get({
						url: this.$api.randomUser,
						data: {
							psize: sold


						}
					});
					if (result.errno == 0) {

						console.log(result.data)
						this.imgList = result.data

						return this.imgList;

					}
				}



			},
			async activitySetFn() {
				const result = await this.$http.get({
					url: this.$api.activitySet,
					data: {



					}
				});
				if (result.errno == 0) {

					console.log(result.data)
					this.activitySetObj = result.data

				}
			},

			// 开始还有多久
			formatTimeDifferenceing(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 如果时间差是负数，表示目标时间已经过去，返回0
				if (timeDifference < 0) {
					return {
						days: '00',
						hours: '00',
						minutes: '00',
						seconds: '00'
					};
				}

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;
				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};

			},
			// 还有多久结束
			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},
			async upCallback(scroll) {
				console.log(this.$api.presellGoodsList)
				const result = await this.$http.get({
					url: this.$api.presellGoodsList,
					data: {
						is_status: this.isStatus,
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,

					}
				});
				if (result.errno == 0) {
					for (const item of result.data.list) {
						// 根据 navIndex 设置 activeTimeing
						if (this.navIndex == 1) {
							item.activeTimeing = this.formatTimeDifferenceing(item.start_time);
						} else {
							item.activeTimeing = this.formatTimeDifference(item.end_time);
						}

						// 等待 randomUserFn 完成后再赋值给 imgList
						item.imgList = await this.randomUserFn(item.sold < 5 ? item.sold : 5);
					}
					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.presellGoodsList = [];
					this.presellGoodsList = this.presellGoodsList.concat(result.data.list);



					console.log(this.presellGoodsList, '==============')



				}
			},

			joinActivities(index, id) {
				this.$sun.navGo('/pages/detail/detail', {
					goods_id: id,
					type: index
				});
			},
			createdgetSystemInfo() {
				uni.getSystemInfo({
					success: e => {
						// 文章网址：https://blog.csdn.net/weixin_44510655/article/details/127131947
						this.heightSystemss = e.statusBarHeight;
						const custom = wx.getMenuButtonBoundingClientRect();
						this.customBar = ((custom.top - e.statusBarHeight) * 2 + custom.height) / 4;
						console.log(this.customBar, '=========')
					}
				});
			},
			getChange(e, is_status) {
				console.log(e, is_status)
				this.navIndex = e;
				this.isStatus = is_status
				this.mescroll.resetUpScroll();
				// this.mescroll.resetUpScroll();
			},







		}
	}
</script>

<style lang="less">
	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.doy-pay-index {
		.tabSwitch {
			width: 348rpx;
			height: 68rpx;
			border-radius: 176rpx;

			background: rgba(197, 79, 26, 0.48);

			.activeBtn {
				width: 116rpx;
				height: 68rpx;
				border-radius: 158rpx;

				background: rgb(255, 255, 255);
			}

			.transitionBtn {
				width: 116rpx;
				height: 68rpx;
				border-radius: 158rpx;

				// background: rgb(255, 255, 255);
			}
		}

		.v-return {
			margin-left: 30rpx;
			position: absolute;
			display: flex;
			align-items: center;
			// background-color: #fff;
			// position: fixed;
			width: 100%;
			// padding:0 30rpx;
			z-index: 999;
			color: #fff;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 32rpx;
			}
		}

		.containerList {
			margin-left: 20rpx;
			width: 712rpx;
			height: 160rpx;
			border-radius: 20rpx;

			background: rgb(255, 255, 255);
			padding: 20rpx;

			.imgList {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;

			}

			.linkImg {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}

		.top-card {
			background-image: (var(--bg-image));
			background-repeat: no-repeat;
			background-size: contain;
			position: relative;
			height: 324rpx;

			.seckillTimer {
				position: absolute;
				top: 72%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.top-border {
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.06);
			}

			.top-num {
				width: calc(100% / 3);
				padding: 30rpx 0 28rpx;

				text {
					font-size: 32rpx;
					font-weight: 500;
					color: rgb(255, 255, 255);
				}

				view {
					font-size: 24rpx;
					color: rgb(219, 225, 255);
					margin-top: 6rpx;
				}
			}

			.top-all-num {
				padding: 28rpx 0 60rpx;
				width: calc(100% / 3);

				image {
					border-radius: 100rpx;
					width: 52rpx;
					height: 52rpx;
				}

				.all-cls {
					text {
						color: rgb(255, 255, 255);
						font-size: 24rpx;
					}

					view {
						color: rgb(255, 255, 255);
						font-size: 32rpx;
						padding: 12rpx 0 10rpx;
						font-weight: 600;
					}
				}
			}
		}

		.v-content {
			border-radius: 40rpx 40rpx 0 0;
			position: absolute;

			width: 100%;

			background: linear-gradient(180.00deg, rgb(245, 233, 228) 1.311%, #fff9f9, 30.317%, rgba(255, 255, 255, 0) 11.557%);
			height: 500rpx;
			// background-color: #fff;
			z-index: 10;
			margin-top: -40rpx;
			padding: 36rpx 20rpx;

			.dailyFlashSaleList {


				.activeBtn {
					color: #fff;
					width: 128rpx;
					height: 60rpx;
					border-radius: 136rpx;

					background: rgb(239, 60, 46);
				}

				.joinGroupBtn {
					border-radius: 12rpx;
					color: #fff;
					background: rgb(239, 60, 46);
					width: 90rpx;
					height: 50rpx;
				}

				.dailyFlashSaleContainer {
					position: relative;


					.dailyFlashSaleImg {
						// position: absolute;
						top: 0;
						left: 0;
						border-radius: 10rpx;
						width: 217rpx;
						height: 217rpx;

					}

					.text {
						position: absolute;
						width: 107rpx;
						height: 40rpx;
						background: rgb(254, 66, 68);
						color: #fff;
						top: 0;
						z-index: 999;
					}

					.trafficText {
						position: absolute;
						// width: 78rpx;
						padding: 0 15rpx;
						height: 40rpx;
						background: rgb(229, 94, 43);
						color: #fff;
						top: 0;
						z-index: 999;
					}

					.triangleText {
						/* path */
						position: absolute;
						// width: 78rpx;
						// padding: 0 30rpx;
						width: 0;
						height: 0;
						border-right: 90rpx solid transparent;

						border-bottom: 90rpx solid rgb(229, 94, 43);
						transform: rotate(90deg); // background: rgb(229, 94, 43);
						color: #fff;
						top: 3rpx;
						z-index: 999;
						left: 3rpx;

						text {
							position: absolute;
							left: 20rpx;
							top: 17rpx;
							transform: rotate(135deg);
							font-size: 17rpx;
						}
					}
				}

				.economize {
					/* 矩形 1707 */

					padding: 5rpx 8rpx 5rpx 5rpx;


					box-sizing: content-box;
					border: 2rpx solid rgb(253, 31, 43);
					border-radius: 20rpx 40rpx 40rpx 0rpx;

					background: rgb(255, 244, 242);
					margin-right: 10rpx;
				}

				.seckillRob {
					// width: 678rpx;
					height: 82rpx;
					border-radius: 20rpx;

					background: rgb(255, 244, 242);
					position: relative;

					.initerBtn {
						position: absolute;
						right: 65rpx;
						top: 6rpx;

						.initerText {
							color: #fff;
							position: relative;
							z-index: 999;
							right: -40rpx;
							top: 25rpx;
							font-size: 24rpx;
						}

						.initerTexts {
							color: #fff;
							position: relative;
							z-index: 999;
							right: -32rpx;
							top: 11rpx;
							font-size: 24rpx;
						}

						.initerImg {
							width: 162.06rpx;
							height: 84rpx;
							position: absolute;
						}
					}

					.registrationBtn {
						width: 102rpx;
						height: 68rpx;
						border-radius: 20rpx;
						color: #fff;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						background: rgb(239, 60, 46);
					}

				}

				.robOver {
					width: 678rpx;
					height: 82rpx;
					border-radius: 20rpx;

					background: #F4F3F3;

					.registrationBtnOver {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						background: #EBEAEA;
					}

					.registrationBtn {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						background: linear-gradient(71.22deg, rgb(244, 106, 26) 1.012%, rgb(239, 60, 46) 97.977%);
					}

					.v-p-share {
						padding: 2rpx 2rpx 0 2rpx;

						.v-m-width {
							margin-right: 40rpx;

							.pt_img {
								width: 50rpx;
								height: 50rpx;
								margin-right: -25rpx;
								border-radius: 50%;
							}
						}

						.v-share-friend {
							text {
								color: #294d7d;
								font-size: 24rpx;
								padding-right: 50rpx;
							}

							view {
								color: #ffffff;
								width: 154rpx;
								height: 58rpx;
							}
						}

						.v-share-friend2 {
							text {
								color: #294d7d;
								font-size: 24rpx;
							}
						}
					}
				}

				.rob {
					width: 678rpx;
					height: 82rpx;
					border-radius: 20rpx;

					background: rgb(255, 244, 242);

					.registrationBtnOver {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						background: #EBEAEA;
					}

					.registrationBtn {
						width: 218rpx;
						height: 82rpx;
						border-radius: 60rpx 20rpx 20rpx 0rpx;
						color: #fff;
						background: linear-gradient(71.22deg, rgb(244, 106, 26) 1.012%, rgb(239, 60, 46) 97.977%);
					}

					.v-p-share {
						padding: 2rpx 2rpx 0 2rpx;

						.v-m-width {
							margin-right: 40rpx;

							.pt_img {
								width: 50rpx;
								height: 50rpx;
								margin-right: -25rpx;
								border-radius: 50%;
							}
						}

						.v-share-friend {
							text {
								color: #294d7d;
								font-size: 24rpx;
								padding-right: 50rpx;
							}

							view {
								color: #ffffff;
								width: 154rpx;
								height: 58rpx;
							}
						}

						.v-share-friend2 {
							text {
								color: #294d7d;
								font-size: 24rpx;
							}
						}
					}
				}


			}

			.char-padding {
				padding-bottom: 50rpx;

				.v-title {
					padding-bottom: 10rpx;

					text {
						background: rgb(75, 135, 254);
						width: 6rpx;
						height: 24rpx;
					}

					view {
						margin-left: 20rpx;
						color: rgb(51, 51, 51);
						font-size: 32rpx;
						font-weight: 700;
					}
				}

				.v-card2 {
					margin: 14rpx 0 -30rpx;
				}

				.v-card {
					margin: 14rpx 0 40rpx;
				}

				.v-card,
				.v-card2 {
					padding: 20rpx;
					border-radius: 20rpx;
					background: rgb(245, 248, 255);

					.transaction-cls {
						width: calc(100% / 3);

						text {
							color: rgb(153, 153, 153);
							font-size: 24rpx;
						}

						view {
							padding-top: 10rpx;
							color: rgb(51, 51, 51);
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}
		}



		.label {
			background-color: #ECECEC;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-left: 20rpx;
		}

		.matrix-4 {
			width: 24rpx;
			height: 24rpx;
			margin-left: 6rpx;
			margin-right: 20rpx;
		}
	}
</style>